<script setup>
import { reactive, ref, computed } from "vue";
import baseModel from "@/components/baseModel/baseModel.vue";

import GTC_tools from "@/views/shotstack/utils/helper.js";
import { useStore } from "vuex";
// 仓库
const store = useStore();
const dialog = ref();
// 仓库中的图文剪辑数据
const GraphicTextMixCutData = computed(() => {
    return store.state.GraphicTextMixCut.GraphicTextMixCutData;
});

const state = reactive({
    list: GTC_tools.getGraphicImgTemplate(),
    // 当前模板的索引
    index:null,
    // 当前选择的 图片模板
    image_tpl:''
})

// 获取当前模板的数据
const getCurrentData = () => {
    return GraphicTextMixCutData.value?.resource_data?.[state.index]
}

const change = (e) => {
    console.log(e, '改变图片模式');
    const current = getCurrentData()
    current.image_tpl = state.image_tpl
    store.commit('GraphicTextMixCut/INIT_GRAPHICTEXT_DATA', GraphicTextMixCutData.value)
    closeModal()
}

// 打开弹窗
const showModal = (params) => {
    // 当前编辑的视频组下标
    const { index } = params;
    state.index = index
    const current = getCurrentData()
    state.image_tpl = current?.image_tpl
    console.log(state.image_tpl,'image_tplimage_tpl');
    dialog.value?.showModal();
};

const closeModal = () => {
    dialog.value?.closeModal();
};


defineExpose({
  showModal,
  closeModal,
});

</script>

<template>
    <baseModel :title="'图片模板'" ref="dialog" :centered="true" :contentWidth="800">
        <template #content>
            <div class="content" :key="videoUrl">
                <a-radio-group v-model:value="state.image_tpl" 
                @change="change"
                class="radio_group">
                    <a-radio class="radio_item" v-for="item in state.list" :key="item.value" :value="item.value">
                        <div class="radio_content">
                            <div class="left">
                                <span class="title">{{ item.name }}</span>
                                <span class="dec">{{ item.dec}}</span>
                            </div>
                            <div class="right">
                            <img :src="item.img" alt="">
                            </div>
                        </div>
                    </a-radio>
                </a-radio-group>
            </div>
        </template>
        <template #footer>
            <span></span>
        </template>
    </baseModel>
</template>



<style lang="less" scoped>

.content{

    .radio_group{
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 20px 0;

        .radio_item{
            // width: 100%;

            .radio_content {
                width: 330px;
                display: flex;
                justify-content: space-between;
                gap: 10px;
                
                .left{
                    flex: 1;
                    display: flex;
                    flex-direction: column;
                    gap: 5px;
                    .dec{
                        color: #777;
                    }
                    .title{
                        font-size: 15px;
                    }
                }

                .right{
                    height: 100%;
                    width: 50px;
                    img{
                        object-fit: cover;
                    }
                }

    

            }
        }
    }

}
</style>